<<!include:header>>
    <!-- ======= Hero Section344 ======= -->
    <section class="hero-section" style="height:50vh;min-height:200px" id="hero">

        <div class="wave">

            <svg width="100%" height="355px" viewBox="0 0 1920 355" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
                        <path
                            d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,757 L1017.15166,757 L0,757 L0,439.134243 Z"
                            id="Path"></path>
                    </g>
                </g>
            </svg>
        </div>

        <div class="container">
            <div class="row align-items-center" style="height:50vh;min-height:200px">
                <div class="col-12 hero-text-image">
                    <div class="row">
                        <div class="col-lg-1 text-center text-lg-left"> </div>
                        <div class="col-lg-6 text-center text-lg-left">
                            <h1 data-aos="fade-right" id="newsKindHead">丰富的业内资料</h1>
                            <p class="mb-5" data-aos="fade-right" data-aos-delay="100" id="newKindDetail">
                                能查到本校区提供的所有公开资料
                            </p>

                        </div>
                        <div class="col-lg-5 iphone-wrap" id="newsKindImg">



                            <!-- <img src="/upload/1/platform/2020-07-20/newsCenter.png" alt="Image" data-aos="fade-right"> -->

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section><!-- End Hero -->

    <main id="main">
        <!-- ======= Testimonials Section ======= -->
        <div class=" container ">

            <div class="input-group row" style="margin: 20px;">
                <div class="col-xs-6 col-sm-8 col-md-4 col-lg-2 ">
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="currentKindUI">全部类别 <span
                            class="caret"></span></button>
                    <ul class="dropdown-menu  " style="background-color: #28a745;" id="kindListUI">

                    </ul>
                </div>
                <div class="col-xs-6  col-sm-8 col-md-4  col-lg-8  ">

                    <input type="text" placeholder="输入资料的名称搜索" onkeypress="inputEnter(event)" class=" form-control"
                        aria-label="...">
                </div>
                <div class="col-xs-6  col-sm-8 col-md-4  col-lg-2 ">
                    <button type="button" class=" btn btn-primary " onclick="search(1)">搜索</button>
                </div>
            </div><!-- /btn-group -->

        </div><!-- /input-group -->


        <div class="container " style="min-height: 500px;padding:10px" id="newsList">


        </div>

        <div class="container">
            <div class="row center-block">
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-lg" id="pageDiv">

                    </ul>
                </nav>
            </div>
        </div>
        </div><!-- End Testimonials Section -->
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script>
            var totalNum = 0;
            var currentPage = 1;//当前页
            var pageStep = 10;// 每页显示多少条
            var currentKind = { value: 0, Label: "全部类别" };
            // 资料类型的选项
            var docKindList = [
                {
                    value: 0,
                    Label: "全部类别"
                }, {
                    value: 1,
                    Label: "教研资料"
                },
                {
                    value: 2,
                    Label: "培训资料"
                },
                {
                    value: 3,
                    Label: "运营资料"
                },
                {
                    value: 4,
                    Label: "竞赛资料"
                },
                {
                    value: 5,
                    Label: "广告资料"
                },
                {
                    value: 6,
                    Label: "宣传资料"
                },
                {
                    value: 7,
                    Label: "其他资料"
                }
            ];
            var kindListStr = ""
            for (var i = 0; i < docKindList.length; i++) {
                var item = docKindList[i];
                kindListStr += `  <li   style="margin:10px;cursor:pointer;" ><span onclick="onselectKind('` + item.value + `')">` + item.Label + `</button></li>`;
            }
            document.getElementById("kindListUI").innerHTML = kindListStr;
            function onselectKind(kindvalue) {
                for (var i = 0; i < docKindList.length; i++) {
                    var item = docKindList[i];
                    if (item.value == kindvalue) {
                        currentKind = item;
                        break;
                    }

                }
                document.getElementById("currentKindUI").innerHTML = currentKind.Label;
            }
            function inputEnter(e) {
                var keynum
                var keychar
                var numcheck

                if (window.event) // IE
                {
                    keynum = e.keyCode
                }
                else if (e.which) // Netscape/Firefox/Opera
                {
                    keynum = e.which
                }
                if (keynum == 13) {
                    //enter 
                    search(1);
                }
            }


            function search(page) {
                currentPage = page;
                searchtitle = document.getElementById("newsKindImg").value;
                if (!searchtitle) {
                    searchtitle = "";
                }
                axios.get('/api/news/getDocument/0/?needPublic=true&content=0&kind_id=' + currentKind.value + '&offset=' + (currentPage - 1) * pageStep + '&limit=' + (pageStep) + '&title=' + searchtitle)
                    .then(function (response) {
                        var res = response.data;
                        if (res.code != 200) {

                            alert(res.title)
                            return;
                        }
                        if (!res.data) {
                            document.getElementById("newsList").innerHTML = "";
                            return
                        }
                        totalNum = res.title;
                        var newsStr = "";
                        for (var i = 0; i < res.data.length; i++) {
                            var newsItem = res.data[i];
                            var downStr = ``;
                            if (newsItem.Downfile && newsItem.Downfile.length > 0) {
                                downStr = ` <button type="button"   style=" position:absolute;bottom:-50px;right:10px" class="btn btn-primary " onclick="javascript:window.location.href='` + newsItem.Downfile + `'">下载</button>`;
                            }
                            newsStr += ` <div class="row media" style="background-color:#f7f7f7 ;overflow: hidden;height:200px;border:1px solid #f1f1f1;margin-bottom:20px;padding:20px;width:100%">
                    <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 media-left">
                        <img class="media-object" style="max-width:150px;max-height:150px;" src="`+ newsItem.icon + `" alt="">
                    </div>
                    <div class="col-xs-7 col-sm-6 col-md-6 col-lg-8  media-body" style="margin-left: 30px;">
                        <span class="media-heading" style="font-size:38px;color:chocolate">`+ newsItem.Title + `</span>
                        
                      <p>  `+ newsItem.Description + ` </p>
                    </div>
                    <div class="col-xs-7 col-sm-3 col-md-3 col-lg-2 "  >
                       `+ downStr + `
                        </div>
                </div>`;

                        }

                        document.getElementById("newsList").innerHTML = newsStr;



                        //------- 翻页
                        var pageStr = `<li style="margin:20px;cursor:pointer;">
                        <div  onclick ="prePage()""  aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </div>
                    </li>`;
                        for (var i = 0; i < Math.ceil(totalNum / pageStep); i++) {
                            if ((i + 1) == currentPage) {
                                pageStr += `<li  style="margin:20px;"> ` + (i + 1) + ` </li>`;

                            } else {
                                pageStr += `<li style="margin:20px;cursor:pointer;"><span onclick="search(` + (i + 1) + `)">` + (i + 1) + `</a></li>`;

                            }
                        }
                        pageStr += `<li style="margin:20px;cursor:pointer;">
                        <div  onclick ="nextPage()"" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </div>
                    </li>`;
                        document.getElementById("pageDiv").innerHTML = pageStr;



                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }
            function prePage() {
                currentPage--;
                if (currentPage <= 0) {
                    currentPage = 1;
                }
                search(currentPage)

            }

            function nextPage() {
                currentPage++;
                if (currentPage > totalNum / pageStep) {
                    currentPage = totalNum / pageStep;
                }
                search(currentPage)

            }


        </script>
    </main><!-- End #main -->
    <<!include:footer>>